<!DOCTYPE html>
<html style="height: 100%;">

<head>
  <title>信息科开放平台</title>
  <link rel="shortcut icon" href="/static/img/Icon.ico"> <!-- 网站图标 必须ico文件 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link rel="stylesheet" href="/static/bootstrap v4/css/bootstrap.min.css">

  <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  <script src="/static/js/jquery-3.4.1.min.js"></script>
  <!--引入DropDown插件-->
  <script src="/static/bootstrap v4/js/bootstrap.bundle.min.js"></script>
  <!--引入WebSocket断线重连插件-->
  <script src="/static/js/reconnecting-websocket.min.js"></script>
  <!-- 包括所有已编译的插件 -->
  <!--    <script src="/static/bootstrap v4/js\bootstrap.min.js"></script>-->



  <style>
    html{
      font-size: 12px; /* 内网大量电脑分辨率是1600*900，因此将默认字体由16px（bootstrap）改为12px  */
    }
    .backgrondStyle {
      background: url('./static/img/bgg.jpg') no-repeat center;
      background-size: 100%;
      border-radius: 30px;
    }
    .hiip_home_top {
      /* background: url('./static/img/top_bg.jpg') no-repeat center; */
      background-size: 100%;
      height: 50px;
    }
    .hiip_home_text {
      font: normal 18px '微软雅黑';
      color: #FFFFFF;
      font-weight: bold;
      float:left;
      text-align:center;
      padding-top: 10px;
    }
    .hiip_username_text {
      font: normal 14px '微软雅黑';
      color: #FFFFFF;
      padding-top: 10px;
    }
  </style>
  <script>
    // 低版本谷歌不支持ES6，没有padStart函数，解决办法是自己重新实现String.prototype.padStart
    // 需在head中定义
    if (!String.prototype.padStart) {
      String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
        padString = String((typeof padString !== 'undefined' ? padString : ' '));
        if (this.length > targetLength) {
          return String(this);
        }
        else {
          targetLength = targetLength - this.length;
          if (targetLength > padString.length) {
            padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
          }
          return padString.slice(0, targetLength) + String(this);
        }
      };
    }
  </script>
</head>

<body class="">
<div class="container-fluid">
  <!--顶栏-->
  <div class="row" style="height: 45px; background-color: #007bff">
    <div class="col-xl-offset-3 col-xl-12 hiip_home_top" >
      <h4 class="hiip_home_text">龙岩市第一医院</h4>
      <h4 class="hiip_username_text  text-right "> <a href="#"><img id="headIconImg" src=""></a><span id="userNameText">&nbsp;放射科&nbsp;&nbsp;赖露露</span></h4>
    </div>
  </div>
  <!--空白间隔栏-->
  <div class="row" style="height: 15px;"></div>
  <div class="row">
    <!--左侧导航栏-->
    <div class="col-xl-2" >
      <ul class="nav flex-column nav-pills">
        <li class="nav-item">
          <a class="nav-link active" href="#">叫号</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">签到</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">预约</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="Statistic_Yj_SqdTimePoint" tabindex="-1" aria-disabled="true">报表1：统计检查单时间点</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="Statistic_Yj_WorkingTime_Ys" tabindex="-1" aria-disabled="true">报表2：统计医生工作时长</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="Statistic_Yj_WorkingTime_Zt" tabindex="-1" aria-disabled="true">报表3：统计组套工作时长</a>
        </li>
      </ul>
    </div>
    <!--空白垂直间隔-->
    <div class="col-xl-0" >

    </div>
    <!--右侧主界面-->
    <div class="col-xl-10" >

      <!--工具栏-->
      <div id="toolBar" class="row" style="">
        <div class="col-xl-10">
          <form class="form-inline">
            <label class="mb-2  mr-sm-2">呼叫队列：</label>
            <input type="text" class="form-control  mb-2  mr-sm-3" readonly="readonly" placeholder="PICC队列">
            <label class="mb-2  mr-sm-2">呼叫诊室：</label>
            <div class="btn-group" id="myDropDown">
              <button id="dropDownShowBtn" type="button" class="btn  btn-primary mb-2 mr-sm-5    dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                请选择诊室
              </button>
              <div class="dropdown-menu" id="dropdownMenu">
                <button class="dropdown-item" type="button" id="dropDownBtn">检查室1</button>
                <button class="dropdown-item" type="button" id="dropDownBtn">检查室2</button>
              </div>
            </div>
            <button id="btnCallNext" type="button" class="btn btn-warning mb-2 mr-sm-2">叫号</button>
          </form>
        </div>
        <!-- toast提示框 -->
        <div class="toast col-xl-2" style="position: absolute; top: 0; right: 0;"  data-delay="5000">
          <div class="toast-header">
            <img id="toastImg" src="" class="rounded mr-2" alt="...">
            <strong id="toastTitle" class="mr-auto">ChyAppointmentPlatform</strong>
            <small>1 sec ago</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div id="toastBody" class="toast-body">
            <span id="toastText">TEST</span>
          </div>
        </div>
      </div>
      <!--空白间隔栏-->
      <div class="row" style="height: 20px;">

      </div>
      <div class="row">
        <!-- 等待叫号列表 -->
        <div class="col-xl-4">
          <div class="row">
            <h4><span class="badge badge-secondary">等待叫号列表</span></h4>
          </div>
          <div class="row"  style="overflow:scroll;height: 700px;">
            <table id="table_wjhList" class="table table-hover">
              <thead class="thead-light">
              <th>排队号</th>
              <th>姓名</th>
              <th>门诊/住院号</th>
              <th>备注</th>
              <th>取号时间</th>
              </thead>
              <tbody id="table_wjhList_tbody">
              <tr>
                <td>0001</td>
                <td>TEST1</td>
                <td>21022352</td>
                <td>PICC维护</td>
                <td>2021-05-01 08:20:32</td>
              </tr>
              <tr>
                <td>0002</td>
                <td>TEST2</td>
                <td>21320253</td>
                <td>CVC维护</td>
                <td>2021-05-01 08:20:32</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 已叫号列表 -->
        <div class="col-xl-8" >
          <div class="row">
            <h4><span class="badge badge-secondary">已叫号列表</span></h4>
          </div>
          <div class="row"  style="overflow:scroll;height: 700px;">
            <table id="table_yjhList" class="table table-hover">
              <thead class="thead-light">
              <th>排队号</th>
              <th>姓名</th>
              <th>门诊/住院号</th>
              <th>备注</th>
              <th>取号时间</th>
              <th>叫号诊室</th>
              <th>叫号人员</th>
              <th>叫号时间</th>
              <th>操作</th>
              </thead>
              <tbody id="table_yjhList_tbody">
              <tr>
                <td>0001</td>
                <td>TEST3</td>
                <td>21022352</td>
                <td>PICC维护</td>
                <td>2021-05-01 08:20:32</td>
                <td>诊室1</td>
                <td>吴思瑶</td>
                <td>2021-05-01 08:20:32</td>
                <td>
                  <button id="btnReCall" type="button" class="btn btn-primary" >重叫</button>
                </td>
              </tr>
              <tr>
                <td>0002</td>
                <td>TEST4</td>
                <td>21320253</td>
                <td>CVC维护</td>
                <td>2021-05-01 08:20:32</td>
                <td>诊室2</td>
                <td>吴思瑶</td>
                <td>2021-05-01 08:20:32</td>
                <td>
                  <button id="btnReCall" type="button" class="btn btn-primary" >重叫</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">

  var lastTryCallId; // 上次尝试叫号的ID
  var IpAndPort;
  var protocol = window.location.protocol;
  if(protocol=="file:"){
    IpAndPort="127.0.0.1:8080";
    $("#headIconImg").attr("src","./static/img/head_Icon.png")
    $("#toastImg").attr("src","./static/img/toast.jpg")
  }else if(protocol=="http:"){
    IpAndPort=window.location.host;
    $("#headIconImg").attr("src","/static/img/head_Icon.png")
    $("#toastImg").attr("src","/static/img/toast.jpg")
  }

  // 解析token
  var token=getCookie('token');
  var strings = token.split("."); //截取token，获取载体
  var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
  $("#userNameText")[0].innerHTML="&nbsp;[&nbsp;"+userInfo.ksmc+"&nbsp;]&nbsp;&nbsp;"+userInfo.ygxm;


  /**
   * 选择诊室时，为按钮赋值
   */
  $(document).on('click', '#dropDownBtn', function () {
    var zxmc = $(this)[0].innerHTML;
    var zsPcName = $(this).attr("zspcname");
    $("#dropDownShowBtn")[0].innerHTML=zxmc;
    $("#dropDownShowBtn").attr("zsPcName",zsPcName);
  });



  //===========================================================================
  // 获取诊室列表（暂时写死，后续将改为选择队列后再从服务端获取）
  var tempMap = new Map();
  tempMap.set("dlxh", 1);
  tempMap.set("dlmc", "PICC队列");
  //map转obj
  var tempObj= Object.create(null);
  for (var key of tempMap) {
    tempObj[key[0]] = key[1];
  }
  $.ajax({
    url:"http://"+IpAndPort+"/CallNumberController/getZsxx",
    type:"POST",
    contentType : 'application/json;charset=utf-8',
    data:JSON.stringify(tempObj),
    success:function(data){
      var jsonObj = $.parseJSON(data );
      if(jsonObj.status==true){
        // js动态构造下拉框
        var zsxxList = $.parseJSON(jsonObj.detail);
        var html="";
        for( var i = 0; i < zsxxList.length; i++ ) {
          // 新增一个属性值zsPcName（无中生有）
          html += "<button class='dropdown-item' type='button' id='dropDownBtn' zsPcName='"+zsxxList[i].zsPcName+"'>" + zsxxList[i].zsmc + "&nbsp;&nbsp;&nbsp;</button>"
        }
        $("#dropdownMenu").html(html);
      }else{
        $("#toastTitle").html("获取诊室信息失败");
        $("#toastText").html(jsonObj.detail);
        $('.toast').toast('show');
      }
    },
    error:function(data){
      // toast组件提示
      $("#toastTitle").html("获取诊室信息失败");
      $("#toastText").html("连接服务端失败...");
      $('.toast').toast('show');
    }
  });
  //===========================================================================

  // 创建socket连接（WebSocket握手）
  console.log("尝试WebSocket连接");
  var ws = new ReconnectingWebSocket("ws://"+ IpAndPort +"/Server_PICC");
  //当WebSocket创建成功时，触发onopen事件
  ws.onopen = function(){
    console.log("进入onopen事件");

    // 消息发送到服务端
    console.log("发送消息：initData");
    ws.send("initData");

  }

  //当收到服务端发来的消息时，触发onmessage事件
  ws.onmessage = function(e){

    console.log("接收到消息：" + e.data);
    var jsonObj = $.parseJSON( e.data );
    if(jsonObj.status==true){
      var dataList = jsonObj.detail.split("&");
      wjhList = JSON.parse( dataList[0] );    // 未叫号列表
      yjhList = JSON.parse( dataList[1] );    // 已叫号列表
    }else if(jsonObj.status==false) {
      // toast组件提示
      $("#toastTitle").html("刷新叫号数据失败");
      $("#toastText").html(jsonObj.detail);
      $('.toast').toast('show');
      return;
    }

    // 装载未叫号数据
    var html ="";
    for( var i = 0; i < wjhList.length; i++ ) {
      html += "<tr>"
      html +=     "<td style='display:none;'>" + wjhList[i].id + "</td>" // ID列隐藏
      html +=     "<td>" + wjhList[i].pdhm + "</td>"
      html +=     "<td>" + wjhList[i].brxm + "</td>"
      html +=     "<td>" + wjhList[i].jzhm + "</td>"
      html +=     "<td>" + wjhList[i].bzxx + "</td>"
      html +=     "<td>" + dateFormat("YYYY-mm-dd HH:MM:SS", new Date(wjhList[i].yysj)) + "</td>"
      html += "</tr>";
    }
    $("#table_wjhList_tbody").html(html);
    $("#table_wjhList_tbody tr").click(onClickTable_wjhList); /* 每次都重新设置点击事件 */


    // 装载已叫号数据
    html ="";
    for( var i = 0; i < yjhList.length; i++ ) {
      html += "<tr>";
      html +=     "<td style='display:none;'>" + yjhList[i].id + "</td>"  // ID列隐藏
      html +=     "<td>" + yjhList[i].pdhm + "</td>"
      html +=     "<td>" + yjhList[i].brxm + "</td>"
      html +=     "<td>" + yjhList[i].jzhm + "</td>"
      html +=     "<td>" + yjhList[i].bzxx + "</td>"
      html +=     "<td>" + dateFormat("YYYY-mm-dd HH:MM:SS", new Date(yjhList[i].yysj)) + "</td>"
      html +=     "<td>" + yjhList[i].jhzs + "</td>"
      html +=     "<td>" + yjhList[i].jhryxm + "</td>"
      html +=     "<td>" + dateFormat("YYYY-mm-dd HH:MM:SS", new Date(yjhList[i].jhsj)) + "</td>"
      html +=     "<td><button id='btnReCall' type='button' class='btn btn-primary' >重叫</button></td>"
      html += "</tr>";

      // 取最新一条叫号数据，如果是我叫的（并且是我上一次尝试叫的病人ID），就开始动画（淡入淡出未叫号列表）
      if(i==0){
        var id = yjhList[i].id;
        var jhrygh=yjhList[i].jhrygh;
        if(lastTryCallId==id && jhrygh==userInfo.ygdm){
          $("#table_wjhList_tbody").hide();
          $("#table_wjhList_tbody").show(500); //500毫秒
        }
      }
    }
    $("#table_yjhList_tbody").html(html);
    $("#table_yjhList_tbody tr").click(onClickTable_yjhList); /* 每次都重新设置点击事件 */


    // // 关闭webSocket
    // console.log("尝试断开WebSocket连接" + e.data);
    // ws.close();
  }

  ws.onclose=function(e){
    console.log("WS连接已关闭");
  }

  /**
   * 时间日期格式化
   *
   */
  function dateFormat(fmt, date) {
    var ret;
    const opt = {
      "Y+": date.getFullYear().toString(),        // 年
      "m+": (date.getMonth() + 1).toString(),     // 月
      "d+": date.getDate().toString(),            // 日
      "H+": date.getHours().toString(),           // 时
      "M+": date.getMinutes().toString(),         // 分
      "S+": date.getSeconds().toString()          // 秒
      // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (var k in opt) {
      ret = new RegExp("(" + k + ")").exec(fmt);
      if (ret) {
        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
      };
    };
    return fmt;
  }

  /**
   * 获取指定名称的cookie
   */
  function getCookie(name){
    var strcookie = document.cookie;//获取cookie字符串
    var arrcookie = strcookie.split("; ");//分割
    //遍历匹配
    for ( var i = 0; i < arrcookie.length; i++) {
      var arr = arrcookie[i].split("=");
      if (arr[0] == name){
        return arr[1];
      }
    }
    return "";
  }


  /**
   * 点击叫号按钮
   */

  $(document).on('click', '#btnCallNext', function () {

    // 先记录尝试叫号的ID
    lastTryCallId =$("#table_wjhList_tbody").find("tr:eq(0)").find("td:eq(0)").html()

    // 获取前台选择的诊室
    var zsmc = $("#dropDownShowBtn")[0].innerHTML;
    var zsPcName =$("#dropDownShowBtn").attr("zsPcName");   // 新增一个属性值（无中生有）
    var tempZsmc=zsmc.split("&nbsp;");   // 去除诊室名称中的空格符（&nbsp;）
    zsmc=tempZsmc.join("");

    if(zsmc.indexOf("请选择诊室") != -1){
      $("#toastTitle").html("叫号失败");
      $("#toastText").html("请先选择叫号诊室");
      $('.toast').toast('show');
      return;
    }
    /* 传递MAP */
    var map = new Map();
    map.set("dlxh", 1);           // 暂时写死
    map.set("dlmc", "PICC队列");  // 暂时写死
    map.set("jhzs", zsmc);
    map.set("jhzsPcName", zsPcName);    // 叫号诊室的诊显屏幕的绑定计算机名
    map.set("LEDckh", 0);    // 暂时写死
    //map转obj
    var obj= Object.create(null);
    for(var key of map){
      obj[key[0]]=key[1];
    }
    $.ajax({
      url:"http://"+IpAndPort+"/CallNumberController/callNext",
      type:"POST",
      contentType : 'application/json;charset=utf-8',
      data:JSON.stringify(obj),
      xhrFields: {
        withCredentials: true
      },
      success:function(data){
        var jsonObj = $.parseJSON(data );
        if(jsonObj.status==false){
          $("#toastTitle").html("叫号失败");
          $("#toastText").html(jsonObj.detail);
          $('.toast').toast('show');
        }else if(jsonObj.status==true){

        }
      },
      error:function(data){
        // toast组件提示
        $("#toastTitle").html("重叫失败");
        $("#toastText").html("连接服务端失败...");
        $('.toast').toast('show');
      }
    });
  })


  /**
   * 点击未叫号表格的某一行
   */
  var preRowNum_jcxm=-1;
  var preRowNum_patient=-1;
  function onClickTable_wjhList(){
    // 所获取的当前行的行号
    if($(this).parent()[0].className=="thead-light"){return;} // 如果点击的是表头，则忽略事件
    var currentRowNum = $(this).parent().find("tr").index($(this)[0]);



    // 改变当前行的颜色
    $(this).attr("class","table-primary");

    // 还原上一次选择的行的颜色
    var trList =  $(this).parent().find("tr");
    $(trList[preRowNum_patient]).attr("class","table");
    if(currentRowNum==preRowNum_patient){preRowNum_patient=-1;}
    else{preRowNum_patient = currentRowNum;}

  }

  /**
   * 点击已叫号表格的某一行
   */
  function onClickTable_yjhList(){
    // 所获取的当前行的行号
    if($(this).parent()[0].className=="thead-light"){return;} // 如果点击的是表头，则忽略事件
    var currentRowNum = $(this).parent().find("tr").index($(this)[0]);

    // 改变当前行的颜色
    $(this).attr("class","table-primary");

    // 还原上一次选择的行的颜色
    var trList =  $(this).parent().find("tr");
    $(trList[preRowNum_jcxm]).attr("class","table");
    if(currentRowNum==preRowNum_jcxm){preRowNum_jcxm=-1;}
    else{preRowNum_jcxm = currentRowNum;}
  }


  //
  // 点击重叫按钮
  //
  $(document).on('click', '#btnReCall', function () {

    //
    // 点击按钮后旋转
    //

    // 禁用按钮
    var btnObj=$(this);
    btnObj.attr({ "disabled": "disabled" });
    // 设置按钮样式为[旋转]
    btnObj.html("重叫<span class='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span>")
    // 定时器
    var timeoutObj = setTimeout(function () {
      // 将按钮可用
      btnObj.removeAttr("disabled");
      // 恢复样式
      btnObj.html("重叫");
      // 清除已设置的setTimeout对象
      clearTimeout(timeoutObj)
    }, 0.6*1000); //0.6秒

    //
    // AJAX
    //

    var id = $(this).parents("tr").find("td").eq(0).text();    // 第0列是ID列（隐藏）

    /* 传递MAP */
    var map = new Map();
    map.set("id", id);
    //map转obj
    var obj= Object.create(null);
    for(var key of map){
      obj[key[0]]=key[1];
    }
    $.ajax({
      url:"http://"+IpAndPort+"/CallNumberController/reCall",
      type:"POST",
      contentType : 'application/json;charset=utf-8',
      data:JSON.stringify(obj),
      xhrFields: {
        withCredentials: true
      },
      success:function(data){
        var jsonObj = $.parseJSON(data );
        if(jsonObj.status==false){
          $("#toastTitle").html("重叫失败");
          $("#toastText").html(jsonObj.detail);
          $('.toast').toast('show');
        }else if(jsonObj.status==true){

        }
      },
      error:function(data){
        // toast组件提示
        $("#toastTitle").html("重叫失败");
        $("#toastText").html("连接服务端失败...");
        $('.toast').toast('show');
      }
    });
  })


</script>
</body>
</html>